<template>
  <view class='login_page'>
    <!-- 登陆页 -->
    <view>
      <image src='../../static/img/logo.png' mode='widthFix'></image>
      <view class='input_box'>
        <view>
          <text class='iconfont icon-yonghu'></text>
          <input type="text" placeholder="请输入用户名" maxlength="30" v-model="user_name">
        </view>
        <view>
          <text class='iconfont icon-weibiaoti1'></text>
          <input type="password" placeholder="请输入密码" maxlength="11" v-model="pwd">
        </view>
      </view>
      <button 
        class='btn'
        hover-class='btn_hover' 
        :loading='loading'
        :disabled="loading" 
        @tap='login'>{{loading?"正在登陆...":"登录"}}</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        login_bg: {
          backgroundSize: "auto 100%",
        },
        loading: false,

        user_name: "sy001@mail.com",
        pwd: "ds123123"
      }
    },
    onReady() {
      let token = uni.getStorageSync('token');
      if(token) {
        this.JumpIndex()
      }
    },
    methods: {
      // 点击登录
      login() {
        if(this.user_name == "") {
          uni.showToast({
            title: '请输入用户名',
            icon: "none"
          });
          return
        }
        if(this.pwd == "") {
          uni.showToast({
            title: '请输入密码',
            icon: "none"
          });
          return
        }
        let self = this;
        this.loading = true;
        this.$http({
          url: this.$api.user.login,
          data: {
            loginName: this.user_name,
            password: this.pwd
          }
        }).then(res => {
          this.loading = false;
          if(res.code == 0) {
             uni.setStorageSync('token',res.data);
             self.JumpIndex()
          }else {
            let title = res.message;
            uni.showToast({
              title,
              duration: 3000,
              icon: "none",
              position: "top"
            });
          }
        }).catch(err => {
          this.loading = false;
        })
        
      },
      // 跳转首页
      JumpIndex() {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.login_page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('../../static/img/login_bg.png') no-repeat;
  background-size: auto 100%;
  background-position: center;
  >view {
    position: relative;
    top: -80upx;
    >image {
      width: 480upx;
    }
    .input_box {
      width: 480upx;
      padding-top: 135upx;
      box-sizing: border-box;
      >view {
        width: 100%;
        height: 80upx;
        display: flex;
        align-items: center;
        padding: 0 30upx;
        box-sizing: border-box;
        color: #000;
        background: #fff;
        margin-bottom: 48upx;
        border-radius: 6upx;
        .iconfont {
          font-size: 45upx;
        }
        >input {
          width: 100%;
          height: 100%;
          padding-left: 15upx;
          box-sizing: border-box;
          font-size: 26upx;
        }
      }
    }
    .btn {
      width: 480upx;
    }
  }

}
</style>